<template>
     <div id="bigBox">
        <!-- 
        关于float属性可以看出几点:
        1、作为盒子的div，在上一个元素左浮起来的情况下，是可以占据其原来的地下位置
        2、对于使用浮动属性来实现两个元素之间的对其排版，在盒子顺序上要紧挨，并且浮动属性是一左一右
        -->
        <div id="left">
            好好欣赏吧，
        </div>
        <div id="right">
            这是莎士比亚，所曾游历过的花园<span id="specially">!</span>
        </div>
        <div id="top">
            欢迎来到王者荣耀英雄信息登录系统
        </div>
        <div id="images">
        </div>
        <div>
            <button @click="f" class="button button1">登录</button>
            <button class="button button2" @click="signIn">注册</button>
        </div>


        <!-- 以下是一个对话框 -->
    </div>
</template>


<script>
// 这种写法即适用于vue2,也适用于vue3,但是不是所有的组件都适应
export default{
    data(){
        return{
           dialogVisible:false,
           form:{
                name:"",
                pwd:"",
           }
        }
    },
    methods:{
        f:function(){
            this.$router.push("/form")  
        },
        signIn:function(){
            // 跳转新的表单页面
            this.$router.push('/signIn')
        }
        
    },
    mounted(){
        // alert('哈哈哈,欢迎来到王者荣耀!')
    }
}
    function my(){
    var bigBox=document.getElementById('bigBox')
    var left=document.getElementById('left')
    var top=document.getElementById('top')
    var center=document.getElementById('images')
    var bottom=document.getElementsByTagName('button')
    var right=document.getElementById('right')
    center.style.backgroundImage="url('https://shp.qpic.cn/ishow/2735092516/1727251888_829394697_13738_sProdImgNo_7.jpg/0')"
    // 用来保证，外层盒子的宽和高是最大的那一个页面
    bigBox.style.width=innerWidth+'px'
    bigBox.style.height=innerHeight+'px'
    //用来控制左对联位置
    left.style.width=0.1*innerWidth+'px'
    left.style.height=innerHeight+'px'
    //控制文字的行高
    left.style.lineHeight=0.1*innerWidth+'px'
    //用来控制标题位置
    top.style.width=0.8*innerWidth+'px'
    top.style.height=0.25*innerHeight+'px'
    //设置padding的左填充区
    top.style.marginLeft=0.1*innerWidth+'px'
    //保证文字是在上下左右均居中
    top.style.lineHeight=0.25*innerHeight+'px'
    // 用来设置图片的宽和高
    center.style.width=0.8*innerWidth+'px'
    center.style.height=0.5*innerHeight+'px'
    //用来控制图片的大小
    center.style.backgroundSize=0.8*innerWidth+'px '+0.5*innerHeight+'px'
    //给图片设置一个左外边框
    center.style.marginLeft=innerWidth*0.1+'px'
    //用来设置一个登录按钮
    bottom[0].style.width=0.4*innerWidth+'px'
    bottom[0].style.height=0.25*innerHeight+'px'
    bottom[0].style.lineHeight=0.25*innerHeight+'px'
    // 
    bottom[1].style.width=0.4*innerWidth+'px'
    bottom[1].style.height=0.25*innerHeight+'px'
    bottom[1].style.lineHeight=0.25*innerHeight+'px'
    //控制右侧的对联
    right.style.width=0.1*innerWidth+'px'
    right.style.height=innerHeight+'px'
    right.style.lineHeight=innerWidth*0.1+'px'

    var arrays=['https://shp.qpic.cn/ishow/2735092516/1727251888_829394697_13738_sProdImgNo_7.jpg/0'
            ,'https://shp.qpic.cn/ishow/2735101616/1729066302_829394697_30638_sProdImgNo_7.jpg/0',
            'https://shp.qpic.cn/ishow/2735101716/1729152466_829394697_16344_sProdImgNo_7.jpg/0'
        ]
        //页面的动态切换
    var i=0
    setInterval(
        ()=>{
            if(i==3){
                i=0
            }
            center.style.backgroundImage="url('"+arrays[i]+"')"
            i++
        },2000
    )
    }
//这个表示等到页面的元素加载完毕之后，再继续进行相应操作 
 window.onload=my
//  这个表示为全局对象增加一个事件监听器，这里添加的是一个视图窗口改变所对应的监听器
 window.addEventListener('resize',my)
</script>
<style>
@font-face {
            font-family: '华凯';
            src: url('../../fonts/STXINGKA.TTF');
        }
        body{
            font-family: '华凯';
            font-size: 20px;
        }
*{
    margin:0;
    padding:0;
    border: 0;
}
#images{
            transition: 0.5s all linear;
        }
#left{
    float: left;
    writing-mode: vertical-lr;
    text-align: center;
    /* font-size: 40px; */
    color: yellow;
    text-shadow: 1px 2px 1px red;
    background-color: skyblue;
}
#center{
    float: left;
}
#right{
    float: right;
    writing-mode: vertical-lr;
    text-align: center;
    /* font-size: 40px; */
    color: yellow;
    text-shadow: 1px 2px 1px red;
    background-color: skyblue;
}
#images{
    background-repeat: no-repeat;
}
.button{
    text-align: center;
    /* font-size: 20px; */
    color: yellow;
    text-shadow: 1px 2px 1px red;
    background-color: skyblue;
    text-decoration: underline;
    font-family: '华凯';
    font-size: 2em;
}
.button2{
    float: right;
}
#top{
    text-align: center;
    /* font-size: 60px; */
    color: yellow;
    text-shadow: 1px 2px 1px red;
    background-color: skyblue;
}
#specially{
    writing-mode: horizontal-tb;
}
</style>